<template>
  <div class="register" :style="{ height: hrights }">
    <div class="registimg">
      <img src="../../assets/img/reg.jpeg" alt="" />
    </div>
    <div class="register-box">
      <div class="reg-text">欢迎注册,带你翱翔美食天堂</div>
      <div class="register-item">
        <div class="register-input">
          <el-input
            @blur="inputJinGao"
            @focus="inputFocus"
            @input="inputChang"
            placeholder="昵称"
            v-model="inputName"
            maxlength="7"
            clearable
          >
          </el-input>
        </div>

        <div class="register-sure" v-if="inputSure">
          <img src="../../assets/img/gou.svg" alt="" />
        </div>

        <div class="register-jingao" v-if="jinGao">
          <img src="../../assets/img/jingao.svg" alt="" /> 昵称不能为空
        </div>
      </div>

      <div class="register-item">
        <div class="register-input">
          <el-input
            placeholder="请输入账号"
            @blur="inputJinGao2"
            @focus="inputFocus2"
            @input="inputChang2"
            v-model="inputCount"
            maxlength="16"
            clearable
          >
          </el-input>
        </div>

        <div class="register-sure" v-if="inputSure2">
          <img src="../../assets/img/gou.svg" alt="" />
        </div>

        <div class="register-jingao" v-if="jinGao2">
          <img src="../../assets/img/jingao.svg" alt="" /> 账号不能为空
        </div>

        <div class="register-tishi" v-if="inputTishi">
          <div class="tishi-item">
            <img v-if="!inputPan" src="../../assets/img/bluejg.svg" alt="" />
            <img v-else src="../../assets/img/sure.svg" alt="" />
            长度为不能超过12个字符,少于8个字符
          </div>
        </div>
      </div>

      <div class="register-item">
        <div class="register-input">
          <el-input
            placeholder="请输入你的密码"
            v-model="inputPassword"
            @blur="inputJinGao3"
            @focus="inputFocus3"
            @input="inputChang3"
            maxlength="16"
            show-password
          >
          </el-input>
        </div>
        <div class="register-sure" v-if="inputSure3">
          <img src="../../assets/img/gou.svg" alt="" />
        </div>

        <div class="register-jingao" v-if="jinGao3">
          <img src="../../assets/img/jingao.svg" alt="" /> 密码不能为空
        </div>

        <div class="register-tishi" v-if="inputTishi2">
          <div class="tishi-item">
            <img v-if="!inputPan2" src="../../assets/img/bluejg.svg" alt="" />
            <img v-else src="../../assets/img/sure.svg" alt="" />
            长度为8~16个字符
          </div>
        </div>
      </div>

      <div class="register-item">
        <div class="register-input">
          <el-input
            placeholder="确认密码"
            v-model="surePassword"
            @blur="inputJinGao4"
            @input="inputChang4"
            maxlength="16"
            show-password
          ></el-input>
        </div>

        <div class="register-sure" v-if="inputSure4">
          <img src="../../assets/img/gou.svg" alt="" />
        </div>

        <div class="register-jingao" v-if="jinGao4">
          <img src="../../assets/img/jingao.svg" alt="" /> 密码不一致
        </div>
      </div>

      <div class="register-item">
        <div class="register-input">
          <el-input
            placeholder="请输入你的邮箱"
            v-model="inputEmail"
            @blur="inputJinGao5"
            @focus="inputFocus5"
            @input="inputChang5"
            clearable
          >
          </el-input>
        </div>

        <div class="register-sure" v-if="inputSure5">
          <img src="../../assets/img/gou.svg" alt="" />
        </div>

        <div class="register-jingao" v-if="jinGao5">
          <img src="../../assets/img/jingao.svg" alt="" /> 邮箱格式错误
        </div>
      </div>

      <div class="register-item" v-if="checkingHed">
        <div class="register-yanzm">
          <el-input v-model="inputChecking" @input="inputChang7"> </el-input>

          <el-button
            type="primary"
            @click="getChecking"
            :disabled="buttonDis"
            >{{ checking }}</el-button
          >
        </div>

        <div class="register-sure" v-if="inputSure6">
          <img src="../../assets/img/gou.svg" alt="" />
        </div>

        <div class="register-jingao" v-if="jinGao6">
          <img src="../../assets/img/jingao.svg" alt="" /> 验证码错误
        </div>
      </div>

      <div class="register-item">
        <div class="register-zhuce">
          <el-button type="primary" @click="zhuce" :disabled="buttonDis2"
            >立即注册</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { request } from "../../network/request";

export default {
  name: "Register",
  data() {
    return {
      hrights: "",
      inputName: "",
      inputPassword: "",
      surePassword: "",
      inputEmail: "",
      inputCount: "",
      inputChecking: "",
      jinGao: false, //警告
      inputSure: false, //是否正确

      jinGao2: false,
      inputSure2: false,
      inputTishi: false, //提示
      inputPan: false, //是否按要求输入

      jinGao3: false,
      inputSure3: false,
      inputTishi2: false,
      inputPan2: false,

      jinGao4: false,
      inputSure4: false,

      jinGao5: false,
      inputSure5: false,

      jinGao6: false,
      inputSure6: false,
      buttonDis: true, //按钮是否可选
      buttonDis2: true, //是否能进行注册
      checking: "获取验证码",
      checkingFlag: null,
      checkingTime: 120,
      checkingHed: false, //是否显示
    };
  },
  created() {
    this.handleResize();
  },
  beforeDestroy: function () {
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    //文本框失去焦点
    inputJinGao() {
      if (this.inputName == "") {
        this.jinGao = true;
      } else {
        this.jinGao = false;
        this.inputSure = true;
      }
    },
    //文本框获取焦点
    inputFocus() {
      this.jinGao = false;
    },
    //文本框的值发生改变
    inputChang() {
      if (this.inputName == "") {
        this.inputSure = false;
      }
      this.judge();
    },

    inputJinGao2() {
      let count = this.inputCount;
      if (this.inputCount == "") {
        this.jinGao2 = true;
      }
      if (count.length <= 12 && count.length >= 8) {
        this.jinGao2 = false;
        this.inputSure2 = true;
      }
      this.inputTishi = false;

      if (this.inputPan) {
        this.inputTishi = false;
      }
    },
    inputFocus2() {
      this.jinGao2 = false;
      this.inputTishi = true;
    },
    inputChang2() {
      if (this.inputCount.length <= 12 && this.inputCount.length >= 8) {
        this.inputPan = true;
      } else {
        this.inputPan = false;
        this.inputSure2 = false;
      }
      this.judge();
    },

    inputJinGao3() {
      if (this.inputPassword == "") {
        this.jinGao3 = true;
      }
      if (this.inputPassword.length >= 8 && this.inputPassword.length <= 16) {
        this.jinGao3 = false;
        this.inputSure3 = true;
      }
      this.inputTishi2 = false;
    },
    inputFocus3() {
      this.jinGao3 = false;
      this.inputTishi2 = true;
    },
    inputChang3() {
      if (this.inputPassword.length >= 8 && this.inputPassword.length <= 16) {
        this.inputPan2 = true;
      } else {
        this.inputPan2 = false;
        this.inputSure3 = false;
      }
      this.judge();
    },

    inputJinGao4() {
      if (this.surePassword != this.inputPassword || this.surePassword == "") {
        this.jinGao4 = true;
      } else {
        this.jinGao4 = false;
        this.inputSure4 = true;
      }
    },
    inputChang4() {
      if (this.surePassword != this.inputPassword || this.surePassword == "") {
        this.inputSure4 = false;
      }

      if (this.surePassword == this.inputPassword) {
        this.jinGao4 = false;
      }
      this.judge();
    },

    inputJinGao5() {
      request({
        url: "/user/isSendEmail",
        params: {
          email: this.inputEmail,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 500) {
          this.$message({
            showClose: true,
            type: "error",
            iconClass: "ss",
            message: "此邮箱已注册过账号",
          });
          this.inputSure5 = false;
          this.buttonDis = true;
        } else {
          let verify =
            /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{3,14}/;
          if (this.inputEmail == "" || !verify.test(this.inputEmail)) {
            this.checkingHed = false;
            this.jinGao5 = true;
          } else {
            this.jinGao5 = false;
            this.inputSure5 = true;
            this.buttonDis = false;
          }
        }
      });
      this.judge();
    },
    inputFocus5() {
      this.jinGao5 = false;
      this.checkingHed = true;
    },
    inputChang5() {
      let verify = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{3,14}/;
      if (this.inputEmail == "" || !verify.test(this.inputEmail)) {
        this.inputSure5 = false;
      }

      this.judge();
    },

    getChecking() {
      request({
        url: "/user/sendEmail",
        params: {
          email: this.inputEmail,
        },
      })
        .then((res) => {
          console.log(res);
          if (res.data.code == 500) {
            this.$message({
              showClose: true,
              type: "error",
              iconClass: "ss",
              message: "此邮箱已注册过账号",
            });
          } else {
            this.buttonDis = false;
          }
        })
        .catch((err) => {
          console.log(err);
          console.log(this.inputEmail);
        });

      this.checkingFlag = setInterval(() => {
        this.checking = this.checkingTime + "s";
        this.checkingTime--;
        this.buttonDis = true;

        if (this.checkingTime == 0) {
          this.flag = clearInterval(this.checkingFlag);
          this.checking = "重新获取";
          this.checkingTime = 120;
          this.buttonDis = false;
        }
      }, 1000);
    },
    zhuce() {
      request({
        url: "/user/register",
        method: "post",
        params: {
          username: this.inputName,
          usernum: this.inputCount,
          userpwd: this.inputPassword,
          email: this.inputEmail,
          code: this.inputChecking,
        },
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.$router.push("/loginpage");
          } else {
            this.$message({
              showClose: true,
              type: "error",
              iconClass: "ss",
              message: "验证码错误",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //判断所需的消息是否正确
    judge() {
      if (
        this.inputSure &&
        this.inputSure2 &&
        this.inputSure3 &&
        this.inputSure4 &&
        this.inputSure5
      ) {
        this.buttonDis2 = false;
      } else {
        this.buttonDis2 = true;
      }
    },
    handleResize() {
      this.hrights = document.documentElement.clientHeight + "px";
      console.log(this.hrights);
    },

    inputChang7() {
      request({
        url: "/user/verificationCode",
        method: "post",
        params: {
          code: this.inputChecking,
          userEmail: this.inputEmail,
        },
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.judge();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.register {
  font-size: 0.09rem;
  width: 100%;
}

.register-box {
  width: 3.2rem;
  border-radius: 0.4rem;
  position: absolute;
  left: 55%;
  top: 0.5rem;
}

.register-item {
  margin: 0 auto;
  position: relative;
  width: 3rem;
  margin-top: 0.2rem;
  margin-bottom: 0.15rem;
}

.register-input {
  width: 2.5rem;
}

.register-yanzm {
  display: flex;
  width: 2.5rem;
}

.register-zhuce button {
  width: 2.5rem;
}

.register-yanzm input {
  width: 1.2rem;
}

.register-yanzm button {
  background-color: rgb(64, 158, 255);
  width: 1.2rem;
  border-radius: 0.05rem;
  color: #fff;
}

.register-sure {
  position: absolute;
  top: 0.1rem;
  right: 0.3rem;
}

.register-sure img {
  width: 0.15rem;
  height: 0.15rem;
}

.register-jingao {
  display: flex;
  justify-content: left;
  color: red;
  align-items: center;
  margin-top: 0.1rem;
}

.register-jingao img {
  width: 0.18rem;
  height: 0.18rem;
  margin-right: 0.1rem;
}

.tishi-item {
  display: flex;
  align-items: center;
  margin-top: 0.1rem;
}

.register-tishi img {
  width: 0.18rem;
  height: 0.18rem;
  margin-right: 0.1rem;
}

.registimg {
  width: 5.2rem;
  height: 100%;
}

.registimg img {
  width: 100%;
  height: 100%;
}

.reg-text {
  font-size: 0.18rem;
  margin-left: 0.1rem;
  margin-top: -0.5rem;
  margin-bottom: 0.2rem;
}
</style>